<template>
  <div class="home">
    <div class="statistics">
      <StatisticsCard
        @click.native="$router.push('/task')"
        bg="#0E35FF"
        :total="blockData.allCount"
        tip="下单任务总数（个）"
      />
      <StatisticsCard
        bg="#97302F"
        @click.native="$router.push({ path: '/task', query: { p: 300 } })"
        :total="blockData.overCount"
        tip="完成任务数（个）"
      />
      <StatisticsCard
        bg="#092177"
        @click.native="$router.push('/task')"
        :total="blockData.notOverCount"
        tip="未完成任务单数（个）"
      />
      <StatisticsCard
        bg="#00551F"
        :total="blockData.ZongPrice"
        tip="充值金额(元)"
      />
      <StatisticsCard
        bg="#662A00"
        :total="blockData.price"
        tip="剩余金额（元）"
      />
    </div>
    <div class="chart">
      <HomeCard title="任务完成情况" class="chart-card-1">
        <div slot="action">
          <el-select
            class="home-card-sel"
            v-model="card.yearsValue1"
            @change="getChart1ByYear(card.yearsValue1)"
            placeholder="请选择"
          >
            <el-option
              v-for="item in lineChartYears"
              :key="item.val"
              :label="item.name"
              :value="item.val"
            >
            </el-option>
          </el-select>
        </div>
        <LineChart ref="chart1" />
      </HomeCard>
      <HomeCard title="月度金额" class="chart-card-2">
        <div slot="action">
          <el-date-picker
            class="home-card-sel"
            :clearable="false"
            @change="getChart2ByYear(card.yearsValue2)"
            v-model="card.yearsValue2"
            type="month"
            format="yyyy-MM"
            value-format="yyyy-MM"
            placeholder="选择月"
          >
          </el-date-picker>
        </div>
        <PieChart ref="chart2" :m="card.yearsValue2" />
      </HomeCard>
      <HomeCard title="年度任务单数" class="chart-card-3">
        <div slot="action">
          <el-button
            type="primary"
            round
            size="small"
            @click="$refs.CreateTaskDialog.AddTask()"
          >
            <i class="el-icon-plus"></i>新建任务</el-button
          >
        </div>
        <TimeLine ref="chart3" />
      </HomeCard>
    </div>
    <HomeCard title="未完成任务">
      <div slot="action">
        <el-button
          type="text"
          style="color: #B9BEEB"
          @click="$router.push('/task')"
          >查看更多</el-button
        >
      </div>
      <el-table class="dark-table" :data="tableData" style="width: 100%">
        <el-table-column prop="TaskNum  " label="任务单号" width="180">
          <div
            class="task-no"
            slot-scope="s"
            @click="
              $router.push({
                path: '/task_detail',
                query: { id: s.row.TaskNo },
              })
            "
          >
            {{ s.row.TaskNum }}
          </div>
        </el-table-column>
        <el-table-column prop="ContactName" label="HR名称" width="180">
        </el-table-column>
        <el-table-column prop="CandidateName" label="候选人名称">
        </el-table-column>
        <el-table-column prop="ParmTaskState" label="任务单状态">
        </el-table-column>
        <el-table-column prop="ParmTaskProgress" label="任务进度">
        </el-table-column>
        <el-table-column prop="ParmLanguage" label="报告语言">
        </el-table-column>
        <el-table-column prop="CreateTime" label="创建时间">
          <div slot-scope="s">{{ DateTimeParse(s.row.CreateTime) }}</div>
        </el-table-column>
        <el-table-column prop="SurveyEndDate" label="截止时间">
          <div slot-scope="s">{{ DateTimeParse(s.row.SurveyEndDate) }}</div>
        </el-table-column>
        <el-table-column prop="ShieldName " label="调查结果" align="center">
          <div slot-scope="s">
            <TaskResultIcon :s="s.row.ShieldName" />
          </div>
        </el-table-column>
        <el-table-column prop="name" label="操作" align="center" width="210">
          <div class="action-group" slot-scope="s">
            <img
              v-if="s.row.ParmTaskProgress === '完成'"
              @click="openReport({ id: s.row.TaskNo })"
              class="action-icon"
              src="../../assets/images/table/view.png"
              alt=""
            />
            <img
              class="action-icon"
              v-if="
                s.row.ParmTaskState != '完成' && s.row.ParmTaskState != '进行中'
              "
              src="../../assets/images/table/refresh.png"
              @click="updateState(s.row.TaskNo, 287)"
              alt=""
            />

            <i
              @click="updateState(s.row.TaskNo, 284)"
              v-if="s.row.ParmTaskState === '已暂停'"
              style="color: #5284ff;font-size: 25px;cursor: pointer;padding: 0 11px"
              class="el-icon-video-play"
            ></i>
            <img
              v-else
              class="action-icon"
              src="../../assets/images/table/stop.png"
              @click="updateState(s.row.TaskNo, 286)"
              alt=""
            />

            <el-dropdown
              trigger="hover"
              v-if="s.row.ParmTaskProgress === '完成'"
            >
              <img
                class="action-icon"
                src="../../assets/images/table/download.png"
                alt=""
              />
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="surveyReportPdf(s.row.fileNo)">
                  下载背调报告{{ s.row.name }}
                </el-dropdown-item>
                <el-dropdown-item
                  v-if="s.row.IsCePing"
                  @click.native="CPReportDownload(s.row.TaskNo)"
                >
                  下载性格评估报告
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-table-column>
      </el-table>
    </HomeCard>
    <CreateTaskDialog ref="CreateTaskDialog" />
  </div>
</template>

<script>
import HomeCard from "./Card.vue";
import LineChart from "./chart/Line.vue";
import PieChart from "./chart/Pie.vue";
import TimeLine from "./chart/TimeLine.vue";
import CreateTaskDialog from "../task/index/CreateTaskDialog.vue";
import dayjs from "dayjs";
import { CPDownUrl } from "@/config/url.js";
import { downloadFile } from "@/utils/common";
import { openReport } from "@/utils/common.js";

import {
  getCompanyById,
  getEcharsTask,
  getAllEcharsTask,
  GetCompanyAmount,
  GetHomeTaskList,
  GetHomeTaskCount,
} from "@/api/home/index.js";
import { updateState } from "@/api/task/list.js";
import StatisticsCard from "./StatisticsCard.vue";
const Year = dayjs().format("YYYY");
export default {
  data() {
    return {
      blockData: {
        ZongPrice: 0,
        price: 0,
        allCount: 0,
        overCount: 0,
        notOverCount: 0,
      },

      lineChartYears: [
        { name: Year + "年", val: Year },
        { name: Year - 1 + "年", val: Year - 1 },
        { name: Year - 2 + "年", val: Year - 2 },
      ],
      tableData: [],
      card: {
        yearsValue1: Year,
        yearsValue2: dayjs().format("YYYY-MM"),
        yearsValue3: Year,
      },
    };
  },
  methods: {
    openReport(p) {
      openReport(p);
    },
    getTableData() {
      GetHomeTaskList({})
        .then((r) => {
          this.tableData = r.data || [];
        })
        .catch(() => {});
    },
    updateState(TaskId, State) {
      let tip;
      if (State === 287) {
        tip = "确定修改状态，是否撤销？";
      }
      if (State === 284) {
        tip = "确定修改状态，是否恢复？";
      }
      if (State === 286) {
        tip = "确定修改状态，是否暂停？";
      }
      this.$confirm(tip, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //287撤销，656暂停
          updateState({ TaskId, State })
            .then(() => {
              this.$message("状态修改成功");
              this.getTableData();
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
    getChart1ByYear(year) {
      //任务完成情况
      getEcharsTask({ year })
        .then((r) => {
          this.$refs.chart1.buildChart(r.legend.data, r.xAxis.data, r.series);
        })
        .catch(() => {});
    },
    getChart2ByYear(year) {
      //月度金额
      GetCompanyAmount({ yue: year })
        .then((r) => {
          this.$refs.chart2.buildChart(r.Balance, r.price);
        })
        .catch(() => {});
    },
    getChart3ByYear(year) {
      //任务完成情况

      getAllEcharsTask({ year })
        .then((r) => {
          this.$refs.chart3.buildChart(r.xAxis.data, r.series[0].data);
        })
        .catch(() => {});
    },
    CPReportDownload(id) {
      window.open(CPDownUrl + "?user_id=" + id);
    },
    surveyReportPdf(no) {
      downloadFile(no);
    },
  },
  mounted: function() {
    //统计
    getCompanyById({})
      .then((r) => {
        let { ZongPrice, price } = r;
        this.blockData.ZongPrice = ZongPrice || 0;
        this.blockData.price = price || 0;
      })
      .catch(() => {});
    GetHomeTaskCount({})
      .then((r) => {
        this.blockData.allCount = r.allCount;
        this.blockData.overCount = r.overCount;
        this.blockData.notOverCount = r.notOverCount;
      })
      .catch(() => {});
    //图表
    this.getChart1ByYear(this.card.yearsValue1);
    this.getChart2ByYear(this.card.yearsValue2);
    this.getChart3ByYear(this.card.yearsValue3);
    //表格
    this.getTableData();
  },
  components: {
    StatisticsCard,
    HomeCard,
    LineChart,
    PieChart,
    TimeLine,
    CreateTaskDialog,
  },
};
</script>
<style lang="scss">
.home {
  .statistics {
    display: flex;
    justify-content: space-between;
    > div {
      width: 19%;
    }
  }
  .chart {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    .chart-card-1 {
      width: 35%;
    }
    .chart-card-2 {
      width: 35%;
    }
    .chart-card-3 {
      width: 28%;
    }
    .home-card-sel {
      border-radius: 20px;
      overflow: hidden;
      width: 120px;
      border: 1px solid #353854;
      background-color: #353854;
      .el-input {
        border: none;
        background-color: #353854;
      }
      input,
      .el-input__inner {
        background-color: #1e2031;
        border-radius: 20px;
        border: none;
        width: 120px;
        color: #787dab;
      }
    }
  }
  .dark-table tr,
  .dark-table th {
    background-color: #1e2031 !important;
  }
}
</style>
